<template>
  <div class="container">
    <div class="service grids gridColumns2">
      <div class="box" @click="toLink(item.link)" v-for="(item, index) in counter.ycMpParams.basicInfo.infoService" :key="index">
        <div class="img">
          <image :src="item.cover" mode="widthFix" />
        </div>
        <div class="data">
          <div class="name fz12">{{item.title}}</div>
          <div class="relse fz12">
            <div class="form">{{item.form}}</div>
            <div class="time">{{item.releaseDate}}</div>
          </div>
        </div>
        <div class="btn" @click="toLink(item.link)">查看全文</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let dicts = ref([]);

onLoad(() => {
  getDict();
});

async function getDict() {
  dicts.value = await proxy.$apis.getDict({
    type: "query",
    data: { code: "info_source" },
  });
}

function toLink(url) {
  proxy.$utils.toLink(`/packagePages/currency/webView?url=${url}`);
}
</script>



<style lang="scss" scoped>
.container {
  padding: 15px;
}
.service {
  gap: 35px 25px; //上下间距 左右间距
  .box {
    .data {
      background-color: white;
      border-radius: 0 0 10px 10px;
      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
        min-height: 34px;
      }
      .relse {
        padding-top: 5px;
        .form {
          color: #349ad6;
          padding-bottom: 3px;
        }
      }
    }
  }
  .btn {
    background-color: #4196a2;
    border-radius: 25px;
    margin-top: 15px;
    text-align: center;
    color: white;
    line-height: 28px;
    cursor: pointer;
  }
}
</style>



